<!DOCTYPE HTML> 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Element layout|各类元素布局</title>
<link rel="icon" href="/i/demo_icon.ico" type="image/ico" sizes="16x16" />
<style type="text/css">
header{
	background-color:black;
	color:white;
	text-align:center;
	padding:5px;
}
nav{
	line-height:30px;
	background-color:#eee;
	height:300px;
	width:100px;
	float:left;
	padding:5px;
}
section{
	width:350px;
	float:left;
	padding:10px;
}
footer{
	background-color:black;
	color:white;
	clear:both;
	text-align:center;
	padding:5px;
}
</style>

</head>

<body>
<h3>HTML 5 New Elmemnt布局</h3>
<header>
	<h5>This is Header</h5>
</header>

<nav>
China<br/>
Chongqing<br/>
fuling<br/>
</nav>

<section>
	<h6>China</h6>
	<p>
	Chongqing City,is very Beatiful!!!!!!
	</P>
	<p>
	Fuling is of the Chongqing!!!!
	</P>
</section>

<footer>
Copyright TEST@test.command
</footer>
<hr />

<h3>div其实与上面差不多，就是标签是div然后用id来调用样式</h3>
<hr />
<h3>Table Layout</h3>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
</body>


</html>